<script setup>
import { useRouter } from 'vue-router';
import "../assets/date"
import axios from "axios"
import { onMounted, ref } from "vue"
import { useStore } from "../store"
let store = useStore()
let aa = ref("")
let x = Math.ceil(Math.random() * 4)
console.log(store.getaa(x))
let router = useRouter()
let ac = ref("")
//跳转到添加地址的页面
function add() {
    router.push("/shouhuo/Tianjia")
}

onMounted(() => {
    axios.get("api/wodei").then(res => {
        aa.value = res.data.data
    })
}),
onMounted(() => {
        axios.get("api/home").then(res => {
            ac.value = res.data.data
        })
    })
function logout() {
    store.logout()
}
</script>
<template>
    <div class="box">
        <div class="title">
            校园易购
        </div>
        <div class="yonghu" v-for="item in aa">
            <img :src="item.img" alt="" class="tu">
            <div class="wen">
                <span>{{ store.nicname }}</span>
                <span>{{ item.name1 }}</span>
            </div>
            <span class="wen1">{{ item.title }}</span>
            <button @click="logout">退出</button>
        </div>
        <div class="zcx">
            <span class="wenzi">我的订单</span>
            <div class="fl">
                <div v-for="(item, index) in ac" :key="index">
                    <RouterLink to="/Home-aa/" style="text-decoration: none; color: black;">
                        <img :src="item.img" alt="">
                        <div>{{ item.mj[index] }}</div>
                    </RouterLink>
                </div>
            </div>
        </div>
        <div class="lsl">
            <span>收货信息</span>
            <RouterLink to="/shouhuo/Tianjia/" class="wz">+新建收货地址</RouterLink>
        </div>
        <span class="wodei">我的权益</span>
        <div class="acacay">
            <div class="xiaozi">
                <img src="../assets/big.jpg" alt="">
                <span>红包</span>
            </div>
            <div class="xiaozi">
                <img src="../assets/big.jpg" alt="">
                <span>红包</span>
            </div>
        </div>
        <el-col class="yc">
            <RouterLink to="/" class="wz">首页</RouterLink>
            <RouterLink to="/Gouwuche" class="wz">购物车</RouterLink>
            <RouterLink to="/Home" class="wz">我的</RouterLink>
        </el-col>
    </div>
</template>
<style scoped>
.box {
    display: flex;
    flex-direction: column;
    width: 375px;
    margin: 0 auto;
    border: 1px solid #ccc;
    background-color: rgba(242, 242, 242, 1);
}

.title {
    height: 50px;
    width: 100%;
    border: 1px solid #ccc;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
    line-height: 20px;
    background-color: white;
}

.yonghu {
    display: flex;
    align-items: center;
    width: 100%;
    height: 150px;
    background-color: rgba(242, 242, 242, 1);
    justify-content: space-around;
}

.tu {
    border-radius: 999px;
    border: 1px #ccc solid;
}

.wen {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 80px;
}

.wen span:nth-of-type(1) {
    font-weight: bold;
}

.wen1 {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    text-align: center;
    padding-top: 7px;
    background-color: white;
    border: 1px solid #ccc;
}

.zcx {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    background-color: white;
}

.wenzi {
    font-size: 24px;
    font-weight: bold;
    margin: 10px;

}

.xiaodai img {
    width: 40px;
    height: 40px;
    border-radius: 999px;
}

.xiaodai {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lsl {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 10px;
}

.wodei {
    margin: 10px;
    font-weight: bold;
    font-size: 20px;
}

.acacay {
    display: flex;
    gap: 20px;
    width: 90%;
    margin: 20px;
    background-color: white;
    border-radius: 10px 10px 10px 10px;
}

.xiaozi {
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: center;
}

.xiaozi img {
    width: 40px;
    height: 40px;
    border-radius: 999px;
}

.fl {
    display: flex;
    justify-content: space-around;
}

.yc {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
}

.wz {
    color: black;
    text-align: center;
    text-decoration: none;
}
</style>